
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>陈艺霖的py项目</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600&family=Oswald:wght@600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../static/all.min.css"> <!-- fontawesome -->
    <!-- <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> -->
    <link rel="stylesheet" href="../static/tailwind.css">
    <link rel="stylesheet" href="../static/tooplate-antique-cafe.css">

<!--

Tooplate 2126 Antique Cafe

https://www.tooplate.com/view/2126-antique-cafe

-->
</head>
<body>

 <div class="modal-body p-4 text-center">

     <div class="mb-0" style="background: #FFFFFF;height:100px;width: border-box;font-size: 40px" >小霖咖啡小店欢迎你~</div>


      </div>
        <div align="center">
            <svg t="1640700138261" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5980" width="200" height="200"><path d="M659.2 486.4 659.2 512c0 38.4-12.8 70.4-32 102.4 0 0 6.4 0 6.4 0 38.4 0 70.4-32 70.4-70.4C710.4 518.4 691.2 492.8 659.2 486.4zM512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0zM531.2 300.8l32 0 0 121.6L531.2 422.4 531.2 300.8zM435.2 268.8l32 0 0 153.6L435.2 422.4 435.2 268.8zM345.6 300.8l32 0 0 121.6L345.6 422.4 345.6 300.8zM640 665.6c-12.8 0-25.6 0-38.4-6.4l0 0c-32 32-83.2 51.2-134.4 51.2l217.6 0 0 44.8L268.8 755.2l0-44.8 198.4 0c-108.8 0-198.4-89.6-198.4-198.4L268.8 435.2l390.4 0 0 0c51.2 12.8 89.6 57.6 89.6 115.2C755.2 614.4 704 665.6 640 665.6z" fill="#d7a26a" p-id="5981"></path></svg>
            <br>

            <a href="/" style="background: #FFFFFF">返回首页</a>
        </div>

    <!-- Intro -->


        <div class="container mx-auto px-2 tm-intro-width">
            <div class="sm:pb-60 sm:pt-48 py-20">
                <div class="bg-black bg-opacity-70 p-12 mb-5 text-center">
                    <h1 class="text-white text-5xl tm-logo-font mb-5">Cafe科普</h1>
                    <p class="tm-text-gold tm-text-2xl">your daily energy booster</p>
                </div>
                <div class="bg-black bg-opacity-70 p-10 mb-5">
                    <p class="text-white leading-8 text-sm font-light">
                        咖啡(coffee)，是用经过烘焙磨粉的咖啡豆制作出来的饮料。作为世界三大饮料之一，其与可可、茶同为流行于世界的主要饮品。咖啡主要的功效，就是可以起到提神醒脑的作用。但实际上，咖啡还具有健胃、强身、止血等功效。咖啡当中含有咖啡因，适量的咖啡因，可以减轻肌肉疲劳，促进消化分泌。咖啡还具有利尿的作用。另外，喝咖啡还具有醒酒的作用，酒后喝咖啡能使酒精快速的代谢。咖啡也可以促进代谢机能，对便秘有很大的功效。如果晚上工作比较疲劳，可以喝一杯咖啡来提神。
                    	 <a rel="nofollow" href="https://www.tooplate.com/contact" target="_parent">send us a message</a>. </p>
                </div>
                <div class="text-center">
                    <div class="inline-block">
                        <a href="#menu" class="flex justify-center items-center bg-black bg-opacity-70 py-6 px-8 rounded-lg font-semibold tm-text-2xl tm-text-gold hover:text-gray-200 transition">
                            <i class="fas fa-coffee mr-3"></i>
                            <span>Let's explore...</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

    <!-- Cafe Menu -->
    <div id="menu" class="parallax-window" data-parallax="scroll" data-image-src="../static/antique-cafe-bg-02.jpg">
        <div class="container mx-auto tm-container py-24 sm:py-48">
            <div class="text-center mb-16">
                <h2 class="bg-white tm-text-brown py-6 px-12 text-4xl font-medium inline-block rounded-md">Our Cafe Menu</h2>
            </div>
            <div class="flex flex-col lg:flex-row justify-around items-center">
                <div class="flex-1 m-5 rounded-xl px-4 py-6 sm:px-8 sm:py-10 tm-bg-brown tm-item-container">
                    <div class="flex items-start mb-6 tm-menu-item">
                        <img src="../static/menu-item-1.jpg" alt="Image" class="rounded-md">
                        <div class="ml-3 sm:ml-6">
                            <h3 class="text-lg sm:text-xl mb-2 sm:mb-3 tm-text-yellow">《1》Hot Cappuccino</h3>
                            <div class="text-white text-md sm:text-lg font-light mb-1">$8.50</div>

                            <div class="btn-group">

                    <form method="post" action="/drink_result">

                        <p><input type="submit" value="加入购物车"> </p>

                    </form>
                </div>
                        </div>
                    </div>
                    <div class="flex items-start mb-6 tm-menu-item">
                        <img src="../static/menu-item-2.jpg" alt="Image" class="rounded-md">
                        <div class="ml-3 sm:ml-6">
                            <h3 class="text-lg sm:text-xl mb-2 sm:mb-3 tm-text-yellow">《2》Hot Americano</h3>
                            <div class="text-white text-md sm:text-lg font-light mb-1">$9.50 </div>

                            <div class="btn-group">

                    <form method="post" action="/drink_result">

                        <p><input type="submit" value="加入购物车"> </p>

                    </form>
                </div>
                        </div>
                    </div>
                    <div class="flex items-start mb-6 tm-menu-item">
                        <img src="../static/menu-item-3.jpg" alt="Image" class="rounded-md">
                        <div class="ml-3 sm:ml-6">
                            <h3 class="text-lg sm:text-xl mb-2 sm:mb-3 tm-text-yellow">《3》Hot Latte #FC6</h3>
                            <div class="text-white text-md sm:text-lg font-light mb-1"> $11.75</div>

                            <div class="btn-group">

                    <form method="post" action="/drink_result">

                        <p><input type="submit" value="加入购物车"> </p>

                    </form>
                </div>
                        </div>
                    </div>
                    <div class="flex items-start mb-6 tm-menu-item">
                        <img src="../static/menu-item-4.jpg" alt="Image" class="rounded-md">
                        <div class="ml-3 sm:ml-6">
                            <h3 class="text-lg sm:text-xl tm-text-yellow mb-1">《4》Hot Espresso</h3>
                            <h3 class="text-lg sm:text-xl mb-2 sm:mb-3 tm-text-yellow">Hot Chocolate</h3>
                            <div class="text-white text-md sm:text-lg font-light"> $11.75 </div>
                            <div class="btn-group">

                    <form method="post" action="/drink_result">

                        <p><input type="submit" value="加入购物车"> </p>

                    </form>
                </div>
                        </div>
                    </div>
                </div>
                <div class="flex-1 m-5 rounded-xl px-4 py-6 sm:px-8 sm:py-10 tm-bg-brown tm-item-container">
                    <div class="flex items-start justify-end mb-6 tm-menu-item-2">
                        <div class="text-right mr-6">
                            <h3 class="text-lg sm:text-xl mb-2 sm:mb-3 tm-text-yellow">《5》Iced Cappuccino</h3>
                            <div class="text-white text-md sm:text-lg font-light mb-1">$10</div>

                            <div class="btn-group">

                    <form method="post" action="/drink_result">

                        <p><input type="submit" value="加入购物车"> </p>

                    </form>
                </div>
                        </div>
                        <img src="../static/menu-item-5.jpg" alt="Image" class="rounded-md">
                    </div>
                    <div class="flex items-start justify-end mb-6 tm-menu-item-2">
                        <div class="text-right mr-6">
                            <h3 class="text-lg sm:text-xl mb-2 sm:mb-3 tm-text-yellow">《6》Iced Americano</h3>
                            <div class="text-white text-md sm:text-lg font-light mb-1"> $12.50</div>

                            <div class="btn-group">

                    <form method="post" action="/drink_result">

                        <p><input type="submit" value="加入购物车"> </p>

                    </form>
                </div>
                        </div>
                        <img src="../static/menu-item-6.jpg" alt="Image" class="rounded-md">
                    </div>
                    <div class="flex items-start justify-end mb-6 tm-menu-item-2">
                        <div class="text-right mr-6">
                            <h3 class="text-lg sm:text-xl mb-2 sm:mb-3 tm-text-yellow">《7》Iced Milky Latte</h3>
                            <div class="text-white text-md sm:text-lg font-light mb-1"> $14</div>

                            <div class="btn-group">

                    <form method="post" action="/drink_result">

                        <p><input type="submit" value="加入购物车"> </p>

                    </form>
                </div>
                        </div>
                        <img src="../static/menu-item-7.jpg" alt="Image" class="rounded-md">
                    </div>
                    <div class="flex items-start justify-end mb-6 tm-menu-item-2">
                        <div class="text-right mr-6">
                            <h3 class="text-lg sm:text-xl tm-text-yellow mb-1">《8》Iced Espresso</h3>
                            <h3 class="text-lg sm:text-xl mb-2 sm:mb-3 tm-text-yellow">Iced Mocha</h3>
                            <div class="text-white text-md sm:text-lg font-light">$10 </div>
                            <div class="btn-group">

                    <form method="post" action="/drink_result">

                        <p><input type="submit" value="加入购物车"> </p>

                    </form>
                </div>
                        </div>
                        <img src="../static/menu-item-8.jpg" alt="Image" class="rounded-md">
                    </div>
                </div>
            </div>
        </div>
    </div>








    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/parallax.min.js"></script>
    <script src="js/jquery.singlePageNav.min.js"></script>
    <script>

        function checkAndShowHideMenu() {
            if(window.innerWidth < 768) {
                $('#tm-nav ul').addClass('hidden');
            } else {
                $('#tm-nav ul').removeClass('hidden');
            }
        }

        $(function(){
            var tmNav = $('#tm-nav');
            tmNav.singlePageNav();

            checkAndShowHideMenu();
            window.addEventListener('resize', checkAndShowHideMenu);

            $('#menu-toggle').click(function(){
                $('#tm-nav ul').toggleClass('hidden');
            });

            $('#tm-nav ul li').click(function(){
                if(window.innerWidth < 768) {
                    $('#tm-nav ul').addClass('hidden');
                }
            });

            $(document).scroll(function() {
                var distanceFromTop = $(document).scrollTop();

                if(distanceFromTop > 100) {
                    tmNav.addClass('scroll');
                } else {
                    tmNav.removeClass('scroll');
                }
            });

            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();

                    document.querySelector(this.getAttribute('href')).scrollIntoView({
                        behavior: 'smooth'
                    });
                });
            });
        });
    </script>
</body>
</html>